import React, { Component } from 'react';
import { Form, Select, Input, Button, Modal, notification } from 'antd';
import store from '../../../redux/index';
const FormItem = Form.Item;
const Option = Select.Option;
import axios from 'axios';

class PopForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: [],
      intData: '',
      editOff: ''
    };
  }
  // 提示框
    openNotification = (type, Message, Description) => {
      notification[type]({
        message: Message,
        description: Description
      });
    };


    editMenuData = (id) => {
      const _this = this;
      // console.log("editMenuData----id-"+id);
      const Token = sessionStorage.getItem('token');
      axios({
        method: 'get',
        url: '/api/admin/element/' + id,
        headers: {
          Authorization: Token
        },
      })
        .then(function (response) {
          _this.setState({
            intData: response.data.data,
            editOff: 'eidtMenu'
          });
        })
        .catch(function (error) {
          console.log(error);
        });
      store.dispatch({ type: 'DeleteValue', DeleteValue: false });
    }

    componentWillReceiveProps(nextProps) {
      if (this.state.id == nextProps.NumId) {
        return false;
      } else {
        this.state.id = nextProps.NumId;
        this.editMenuData(this.state.id);
        // console.log("更新成功-----------");
      }
    }

    render() {
      const { visible, onCancel, onCreate, form, NumId } = this.props;
      const { getFieldDecorator } = form;

      return (
        <Modal
          visible={visible}
          title="创建"
          okText="确定"
          cancelText="取消"
          onCancel={onCancel.bind(this, this.props.form)}
          onOk={onCreate.bind(this, this, this.state.editOff)}
          openNotification={this.openNotification}
        >
          <Form>
            <FormItem
              label="资源编码"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 16 }}
            >
              {getFieldDecorator('code', {
                rules: [{ required: true, message: '请输入资源编码!', }],
                initialValue: store.getState()['changeBtnsStatus'].DeleteValue ? '' : this.state.intData.code
              })(
                <Input placeholder="请输入资源编码" />
              )}
            </FormItem>
            <FormItem
              label="资源类型"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 16 }}
            >
              {getFieldDecorator('type', {
                rules: [{ required: true, message: '请选择资源类型!', }],
                initialValue: store.getState()['changeBtnsStatus'].DeleteValue ? '' : this.state.intData.type
              })(
                <Select placeholder="请选择资源类型">
                  <Option value="uri">uri</Option>
                  <Option value="button">button</Option>
                </Select>
              )}
            </FormItem>
            <FormItem
              label="资源名称"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 16 }}
            >
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入资源名称!', }],
                initialValue: store.getState()['changeBtnsStatus'].DeleteValue ? '' : this.state.intData.name
              })(
                <Input placeholder="请输入资源名称" />
              )}
            </FormItem>
            <FormItem
              label="资源地址"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 16 }}
            >
              {getFieldDecorator('uri', {
                rules: [{ required: true, message: '请输入资源地址!', }],
                initialValue: store.getState()['changeBtnsStatus'].DeleteValue ? '' : this.state.intData.uri
              })(
                <Input placeholder="请输入资源地址" />
              )}
            </FormItem>
            <FormItem
              label="资源请求类型"
              labelCol={{ span: 5 }}
              wrapperCol={{ span: 16 }}
            >
              {getFieldDecorator('method', {
                rules: [{ required: false, message: '请选择资源请求类型!', }],
                initialValue: store.getState()['changeBtnsStatus'].DeleteValue ? '' : this.state.intData.method
              })(
                <Select placeholder="请选择资源请求类型">
                  <Option value="GET">GET</Option>
                  <Option value="POST">POST</Option>
                  <Option value="PUT">PUT</Option>
                  <Option value="DELETE">DELETE</Option>
                </Select>
              )}
            </FormItem>
          </Form>
        </Modal>
      );
    }

}
const CreactForm = Form.create()(PopForm);
export default CreactForm;